<template>
  <Menu ref="sidebarMenu" :accordion="true" :active-name="$route.name" :open-names="openNames" :theme="menuTheme"
        width="auto" @on-select="changeMenu">
    <template v-for="item in menuList">
      <MenuItem v-if="item.children.length<=0" :key="item.name" :name="item.children[0].name">

        <i :class="['fa','fa-fw',item.icon]"></i>
        <span>{{ item.meta.title }}</span>
      </MenuItem>
      <Submenu v-if="item.children.length>0" :key="item.name" :name="item.name">
        <template slot="title">

          <i :class="['fa','fa-fw',item.icon]"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <template v-for="child in item.children">
          <MenuItem :key="child.name" :name="child.name">

            <i :class="['fa','fa-fw',child.icon]"></i>
            <span>{{ child.meta.title }}</span>
          </MenuItem>
        </template>
      </Submenu>
    </template>
  </Menu>
</template>

<script lang="ts">
import {Component, Vue, Prop, Emit} from 'vue-property-decorator';
import AppBase from '@/lib/abpbase';

@Component({})
export default class SidebarMenu extends AppBase {
  name: string = 'SidebarMenu';

  @Prop({type: Array}) menuList: any[];
  @Prop({type: String, default: 'dark'}) menuTheme: string;
  @Prop({type: Array}) openNames: string[];

  @Emit('on-change')
  changeMenu(active: string) {
  }

  updated() {
    this.$nextTick(() => {
      if (this.$refs.sidebarMenu) {
        (this.$refs.sidebarMenu as any).updateActiveName();
      }
    });
  }
}
</script>

<style lang="less" scoped>
@import '../styles/shrinkable-menu.less';
</style>
